<template>
  <div class="dynamic-box">
    <div class="images">
      <image fit="fill" @error="onBackError" style="width: 100%; height: 100%; border-radius: 20rpx;" :src="background" />
      <div class="tomato-box">
       <div class="tomato">
         <image fit="fill" style="width: 100%; height: 100%;" src="/static/tomato.png" />
       </div>
       <span>{{ tomato }}</span>
      </div>
    </div>
    <div class="dynamic" :style="[dynamicStyle]" @click="blur">
      <div class="head">
        <div class="head-img">
          <image round style="width: 100%; height: 100%" :src="headUrl" />
        </div>
        <div class="info">
          <div class="username">
            <text>{{ username }}</text>
          </div>
        </div>
      </div>
      <div @click="click" class="content">
        <text>{{ content }}</text>
      </div>
    </div>
  </div>
</template>

<script>
var DynamicInterface = {
  headUrl: String,
  username: String,
  content: String,
  imageUrl: String,
};
export default {
  props: {
    headUrl: {
      type: String,
      default: "https://img.yzcdn.cn/vant/cat.jpeg",
    },
    username: {
      type: String,
      default: "tsdy",
    },
    content: {
      type: String,
      default:
        "微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, 这里主要用得就是在线的字体库. 它的使用不像之前引用阿里巴巴字体库那样简单。",
    },
    imageUrl: {
      type: String,
      default: () => "https://www.tsdy.club/gogs/anqi00000001/static/raw/master/WeStudy/images/my/back.jpg",
    },
    tomato: {
      type: Number,
      default: () => 0,
    }
  },
  data() {
    return {
      isExist: false,
      commentText: "",
      copyCommentText: "",
      commentWidth: "100px",
      background: ''
    };
  },
  created() {
    this.background = this.imageUrl;
  },
  computed: {
    dynamicStyle() {
      return {};
    },
  },
  //   components: {
  //     toast
  //   },
  methods: {
    onBackError() {
      this.background = 'https://www.tsdy.club/gogs/anqi00000001/static/raw/master/WeStudy/images/my/back.jpg';
    },
    giveLike() {
      if (this.isLike) {
        if (this.likeNum > 0) {
          this.likeNum--;
          this.isLike = false;
        }
      } else {
        // toast("谢谢你的支持！");
        this.likeNum++;
        this.isLike = true;
      }
    },
    displayInput(e) {
      console.log("dis");
      this.commentText = this.copyCommentText;
      if (this.isExist == false) {
        this.commentWidth = "100%";
        this.isExist = true;
      }
    },
    blur(e) {
      console.log("blur");
      if (this.isExist) {
        this.commentText = "";
        this.isExist = false;
        this.commentWidth = "100px";
      }
    },
    submit() {
      this.blur();
      console.log(this.copyCommentText);
    },
    /**
     * @function input事件
     */
    input(e) {
      this.commentText = e.mp.detail.value;
      this.copyCommentText = this.commentText;
    },
    click() {
      this.$emit("click");
    },
  },
};
</script>

<style scoped>
.tomato-box {
  height: 44rpx;
  position: absolute;
  display: flex;
  align-items: center;
  right: 40rpx;
  top: 40rpx;

}
.tomato-box .tomato {
  width: 44rpx;
  height: 100%;
}
.images {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 338rpx;
  align-content: space-around;
  justify-content: space-around;
  border-radius: 20rpx;
}
.comment-icon {
  font-size: 48rpx;
}
.dynamic-box {
  width: 96%;
  display: flex;
  flex-direction: column;
  margin-left: 2%;
  margin-top: 74rpx;
  align-items: center;
  position: relative;
}
.dynamic {
  width: 88%;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 12rpx 12rpx;
  position: relative;
  margin-top: -224rpx;
  border-radius: 20rpx;
}
.dynamic .head {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 42px;
}
.dynamic .head-img {
  height: 42px;
  width: 42px;
}
.dynamic .head .info {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  flex: 5 1 auto;
}
#dynamic .head .info .username {
  font-size: 18px;
  font-weight: 500;
}
#dynamic .head .info .school {
  font-size: 14px;
}
#dynamic .head .share {
  text-align: center;
  flex: 1 1 16px;
  line-height: 42px;
}
.dynamic .content {
  width: 100%;
  word-break: break-all;
  text-indent: 28px;
  line-height: 20px;
  word-spacing: 2px;
  letter-spacing: 2px;
  margin-top: 20px;
  padding-bottom: 32rpx;
}

.dynamic .operate {
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 32px;
  justify-content: space-around;
  margin-top: 5px;
}
.dynamic .operate .comment {
  background: rgba(233, 233, 233, 0.9);
  border-radius: 999px;
  padding-left: 18px;
  color: gray;
  width: 100px;
  font-size: 16px;
  line-height: 32px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.dynamic .operate .comment input {
  flex: 4 1 0;
}
.dynamic .operate .comment .comment-off {
  display: flex;
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 100%;
}
.dynamic .operate .comment button {
  flex: 1 1 0;
  height: 100%;
  line-height: 32px;
}
.dynamic .operate .comment-num {
  text-align: center;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}
.dynamic .operate .like {
  text-align: center;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}
</style>